import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import React, { useEffect, useRef } from 'react'
import *as THREE from 'three'
function Index() {
  // React核心功能在于useRef/useEffect
  // Three.js 的使用用于3D渲染
  // OrbitControls 用于相机控制
  // 创建一个ref用于挂载Three.js的渲染器
  // 核心 场景，相机
  const constainerRef=useRef<HTMLDivElement>(null)
  useEffect(()=>{
    if(!constainerRef.current) return
    const scene=new THREE.Scene()
    const camera=new THREE.PerspectiveCamera(75,
      window.innerWidth/window.innerHeight,0.1,1000
    );
    camera.position.z=1;
    const renderer=new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth,window.innerHeight);
    constainerRef.current.appendChild(renderer.domElement)
    //创建纹理加载器
    const textureLoder=new THREE.TextureLoader();
    const texture=textureLoder.load('../../public/vv.png')
    // 创建全景球体
    const geometry=new THREE.SphereGeometry(1,32,32)
    const material=new THREE.MeshBasicMaterial({
      map:texture,
      side:THREE.BackSide,
    })
    const mesh=new THREE.Mesh(geometry,material)
    scene.add(mesh)
    // 添加交互
    const controls=new OrbitControls(camera,renderer.domElement)
    // 动画循环
    const animate=()=>{
      requestAnimationFrame(animate)
      controls.update()
      renderer.render(scene,camera)
    }
    animate()
    // 
        const handleResize = () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        };
        window.addEventListener('resize', handleResize);

        return () => {
            window.removeEventListener('resize', handleResize);
            renderer.dispose();
        };
  },[])
  return (
    <div ref={constainerRef} style={{width:"100%", height:'100vh'}}>
      
    </div>
  )
}

export default Index
